<template>
  <div class="hello" style="height: 100vh;background:#fff;">
    <app-head :title="title"></app-head>
    <div class="content">
      <h1 class="title">{{datas.title}}</h1>
      <div class="flex_b" style="margin-top: 8px">
        <p>{{datas.firstTime}} - {{datas.lastTime}}</p>

      </div>
      <div class="text">
        {{datas.describe}}
      </div>
      <div class="flex_b" style="margin:28px 0;margin-bottom: 14px">
        <p>已有{{datas.joinNum}}人参与了征稿</p>

      </div>
      <div class="line"></div>
      <div class="word">

        <div class="que_c ">
          <div class="que" style="margin-bottom: 32px" v-for="(item,index) in fileImg">

            <dl style="text-align: left;align-items: center;width: 100%;margin: 10px 0">

                <span style="display: inline-block;width: 43px;height: 43px"> <img style="width: 100%;height: 100%;" :src="item"></span>

              <div style="margin-left: 2%;width: 20%;display: inline-block;height: 40px">
                  <dl style="font-size: 15px;color: #333333;margin: 0">文件名</dl>
                  <dl style="font-size: 13px;color: #777777">2.3M</dl>
              </div>
              <span style="color: #0076FF;font-size: 13px;width: 60%;text-align: right;display: inline-block;height: 40px;line-height: 40px;float: right" @click="del(index)">
                删除
              </span>
            </dl>


          </div>
          <div class="que" style="margin-bottom: 32px" @click="up">

            <dl style="text-align: left;display: flex;align-items: center;margin: 10px 0;margin-top: 5px">
              <div class="input-box btn-upload "
                   style="height: 90px;width: 90px;margin: 0;width:43px;height:43px;padding-left: 0;margin-top: 10px">
                <!--<input id="business_licence_number_elc" name="business_licence_number_elc" class="js_upFile" type="file">-->

                <img  :src="require('../assets/images/add_img.png')"/>
                <input id="iden_z_hidden" type="hidden">
              </div>
              <dt class="name" style="margin-left: 10px;color: #999;margin-top: 5px">上传文件，限制20MB以内</dt>
            </dl>


          </div>
          <div>
            <p style="font-size: 13px;color: #333333;text-align: left;margin-bottom: 16px">展示后台设置的提示语</p>
            <textarea v-model="tip" class="text_ar" name="" id="" placeholder="请输入后台设置的提示语"></textarea>
            <div class="line"></div>
          </div>
        </div>
      </div>
      <div style="margin-top: 38px;">
        <button class="btn_d act" @click="push">提交</button>
      </div>
      <input v-if="ishowFile"  style="display:none;" ref="upload" id="buslicence_elc" @change="updateFile" name="buslicence_elc" class="js_upFile" type="file">
      <!--留言板-->

    </div>
    <div class="mask" v-if="is_mask">
      <div class="mask_con">
        <p class="title">确定删除此留言吗?</p>
        <div class="active">
          <span @click="ok">确定</span>
          <span @click="cancel">取消</span>
        </div>
      </div>
    </div>
    <div class="mask2" v-if="is_mask2">
      正在上传中
    </div>
  </div>
</template>

<script>
  import AppHead from '@/components/Head'

  export default {
    name: "SolicitPush",
    created: function () {

    },
    components: {
      AppHead
    },
    data() {
      return {
        title: '征稿 | 活动标题',
        datas: {},
        files: [],
        fileImg: [],
        tip: '',
        is_mask: false,
        is_mask2: false,
        mes_id: '',
        mes_ind: '',
        ishowFile:true,
      }
    },
    mounted: function () {
      this.init()
    },
    methods: {
      // aler_show:function () {
      //   this.$layer.alert("粘贴的内容已清除文字格式及图片 请重新上传图片！",{
      //     shade:true,
      //     btn: '确定',
      //     shadeClose: true,//点击遮罩是否关闭
      //     time:1000
      //   });
      // },
      init: function () {
        var that = this
        //获取文章内容
        this.$http({
          method: 'get',
          url: '/article/getSolicit',

        }).then(function (res) {

          that.datas = res.data.datas[0]

        }).catch(function (error) {

        })
        // 获取上传的文件

        // this.getFile()

      },
      up(){

        this.$refs.upload.click()
        // this.ishowFile = false
      },
      getObjectURL: function (file) {
        var url = null
        if (window.createObjectURL != undefined) { // basic
          url = window.createObjectURL(file)
        } else if (window.URL != undefined) { // mozilla(firefox)
          url = window.URL.createObjectURL(file)
        } else if (window.webkitURL != undefined) { // webkit or chrome
          url = window.webkitURL.createObjectURL(file)
        }
        return url;
      },
      //上传文件
      updateFile: function (e) {

        var that = this
        let file = e.target.files[0]

        console.log(this.getObjectURL(e.target.files[0]))

        let param = new FormData() // 创建form对象

        that.is_mask2 = true
        that.ishowFile = false
        setTimeout(function () {
          that.is_mask2=false
          // that.fileImg.push(that.getObjectURL(e.target.files[0]))
          that.fileImg.push(require("../assets/images/iconfile.png"))
          that.ishowFile = true
        },1000)

        param.append('image', file, file.name)// 通过append向form对象添加数据
        console.log(param.get('file')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去
        // let config = {
        //   headers: {'Content-Type': 'multipart/form-data'}
        // } // 添加请求头
        // axios.post('/image/uploadImage', param, config)
        //   .then(function (res) {
        //     console.log(res.data.data)
        //     that.fileImg = res.data.data
        //   })
      }
      ,
      //获取文件
      getFile: function () {
        var that = this
        this.$http({
          method: 'get',
          url: '/article/getUpload',

        }).then(function (res) {


          for (var j in res.data.datas) {
            that.files.push(res.data.datas[j])
          }
        }).catch(function (error) {

        })
      }
      ,
      del: function (ind) {
        var that = this
        console.log(ind)
        this.$delete(this.fileImg, ind)

      },
      cancel: function () {
        this.is_mask = false
      },
      ok: function () {
        this.$delete(this.messages, this.mes_ind)
        this.is_mask = false


      },
      push: function () {
        console.log(this.text)
        var that = this
        var params = new FormData()
        params.append("tip", this.tip)
        params.append("id", this.$route.query.id)

        //模拟数据发布之后的效果，正式上线需要注释  139-147行

        that.$layer.alert("提交成功!", {
          shade: true,
          btn: '',
          shadeClose: true,//点击遮罩是否关闭

        });
        setTimeout(function () {
          window.location.reload()
        }, 1500)

        //  真实发布留言之后调用的接口
        that.$http({
          method: 'post',
          url: '/article/pushSolicit',
          data: params
        }).then(function (res) {
          if (res.status == 200) {
            that.$layer.alert("提交成功!", {
              shade: true,
              btn: '确定',
              shadeClose: true,//点击遮罩是否关闭

            });
            setTimeout(function () {
              window.location.reload()
            }, 1500)
          }
        }).catch(function (error) {

        })
      }
    }
  }
</script>

<style scoped lang="less">

  .content {
    padding: 14px 24px;
    padding-bottom: 30px;
    background: #fff;
    margin-top: 4px;
  }

  .title {
    color: #333;
    font-size: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: box;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    height: initial;
    -webkit-box-orient: vertical;
    white-space: initial;
    font-weight: 400;
    text-align: left;
    line-height: 30px;
  }

  .flex_b {
    justify-content: space-between;
  }

  .flex_b p {
    font-size: 13px;
    color: #999;
    margin: 0;
  }

  .text {

    font-size: 15px;
    line-height: 27px;
    text-align: left;
    color: #444;

    width: 327px;
    outline: none;
    padding: 12px 16px;
    padding-left: 0 !important;

    font-size: 15px;

  }

  .del {
    position: absolute;
    right: 10px;
    color: #0076FF;
    top: 10px;
  }

  .atta {
    border: 1px solid #eee;
    padding: 8px 16px;
    text-align: left;
    margin: 16px 0;
  }

  .record {
    text-align: left;
  }

  .record span {
    font-size: 13px;
    color: #999999;
  }

  .word {
    margin-top: 24px;

    font-size: 15px;
    color: #999;

  }

  .more {
    height: 21px;
    font-size: 15px;
    color: #ccc;
    text-align: center;
    padding: 16px 0;
  }

  .line {
    height: 1px;
    width: 95%;
    background: rgba(238, 238, 238, 1);
  }

  .que {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    position: relative;
    margin-bottom: 10px;
    border: 1px solid #eee;
    padding: 0 10px;
    .img_d {
      width: 43px;
      height: 43px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .name {
      font-size: 15px;
      color: #333333;
    }
    .con {
      color: #444444;
      font-size: 16px;
      line-height: 22px;
    }
    .data {
      font-size: 13px;
      color: #777;
      margin-top: 8px;
    }
  }

  .line {
    height: 1px;
    width: 327px;
    background: rgba(238, 238, 238, 1);

  }

  .que_c {

  }

  .res {
    dl {
      margin: 8px 0;
      border-left: 2px solid #5CB31B;
      padding-left: 4px;
      font-size: 15px;
      color: #666;
    }
    p {
      font-size: 16px;
      color: #444444;
      margin-bottom: 4px;
    }
    span {
      color: #999999;
      font-size: 12px;
    }
  }

  .btn_d {
    width: 100%;
    height: 44px;
    line-height: 44px;
    color: #fff;
    font-size: 17px;
    background: #CCCCCC;
    border-radius: 8px;
    border: 1px solid #D8E5F4;
    display: inline-block;
    outline: none;
    margin-bottom: 16px;
    margin-top: 10px;

  }

  .btn_d.act {
    background: #4A90E2;
    color: #fff;
  }

  /*上传图片样式*/
  .js_uploadBox label {
    margin-left: 0.3rem;
    font-size: 0.7rem;
    line-height: 1rem;
    color: #333;
  }

  .js_showBox {
    text-align: center;

    width: 5rem;

    height: 5rem;
    margin: 0.5rem auto;

    line-height: 6rem;
  }

  .js_uploadBox {
    background: #fff;
    padding: 0.5rem 0;;
  }

  .btn-upload {
    width: 3.3rem;
    height: 3.3rem;

    margin: 0 auto;
    overflow: hidden;
    position: relative;

  }

  .btn-upload input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 999;
  }

  .btn-upload {
    width: 50%;
    height: 90%;
    margin-top: 0.2rem;
  }

  .btn-upload img {
    width: 100%;
    height: 100%;
  }

  .btn-upload {
    background: url("../assets/images/add_img.png") no-repeat center;
    -webkit-background-size: 50px;
    background-size: 50px;
  }

  .text_ar {
    border: none;
    outline: none;
    font-size: 13px;
    color: #CCCCCC;
    width: 100%;
    font-family: PingFangSC;
    opacity: .7;
  }

  .mask {

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .2);
    .mask_con {
      background: #fff;
      width: 70%;
      /*height: 100px;*/
      margin: 0 auto;
      margin-top: 60%;
      border-radius: 12px;
      .title {
        height: 65px;
        line-height: 65px;
        font-size: 17px;
        text-align: center;
        border-bottom: 1px solid #eee;
      }
      .active {
        font-size: 17px;
        text-align: center;
        height: 48px;
        line-height: 48px;
        span {
          width: 40%;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }

  }

  .mask2 {
    position: fixed;

    top: 50%;
    width: 229px;
    height: 63px;
    background: rgba(0, 0, 0, 1);
    border-radius: 2px 0px 0px 2px;
    opacity: 0.5;
    color: #fff;
    font-size: 15px;
    text-align: center;
    line-height: 63px;
    left: 50%;
    margin-left: -115px;
  }
</style>
<style lang="less">
  html {
    .vl-notify.vl-notify-alert h2.vl-notice-title {
      display: none !important;
    }
    .vl-notify .vl-notify-btns {
      padding: 0;
    }
    .vl-notify.vl-notify-main {
      box-shadow: none;
    }
    .vl-notify .vl-notify-content {
      font-size: 15px;
      color: #333333;
      text-align: center;
      line-height: 26px;
    }
    .vl-notify-mask {
      background: rgba(0, 0, 0, .5);
    }
    .vl-notify-btns {
      width: 100%;
      display: none;
      height: 48px;
      line-height: 48px;
      border: 1px solid rgba(238, 238, 238, 1);;
      .notify-btn-primary {
        height: 48px;
        background: #fff;
        text-align: center;
        color: #0076FF;
        border: none;
        width: 100%;
        margin: 0 auto;
        font-size: 17px;
      }
    }

  }

</style>
